<template>
  <div class="main-box" id="container">
    <div class="top-box">
      <h4 style="letter-spacing:6px;font-weight:bold">西安市勤务基础数据平台</h4>
      <!--      <button @click="openModal">111</button>-->
    </div>
    <!--    <div class="left-box">222</div>-->


    <div class="right-box">
      <rigth-drawer></rigth-drawer>
    </div>
    <div class="footer-top" :style="{bottom:showfooter.length >0? '90px':'-80px'}">
      <div class="footer-top-main" >
        <div :class="flag == 1 ? 'ft_h' : 'ft'" v-for="(item, index) in showfooter" key="index"
             @click="secoundToolClick(item, index)">
        </div>

      </div>
    </div>
    <div class="footer-box">

      <div class="footer-main"  @click.self.stop="hideSecoundTool()">
        <a-space>
          <div title="标绘"
              :class="flag1 == 1 ? 'gj1_h' : 'gj1'"
              @click.self.stop="bottomClick(1)"
          ></div>
          <div title="模型"
              :class="flag1 == 2 ? 'gj2_h' : 'gj2'"
              @click.self.stop="bottomClick(2)"
          ></div>
          <div title="测量"
              :class="flag1 == 3 ? 'gj3_h' : 'gj3'"
              @click.self.stop="bottomClick(3)"
          ></div>
          <div title="工具"
              :class="flag1 == 4 ? 'gj4_h' : 'gj4'"
              @click.self.stop="bottomClick(4)"
              @mouseenter="onEnterTd"
              @mouseleave="onLeaveTd"
          ></div>
        </a-space>
        <div class="gj-btn" v-show="toolModal2" @click="openModal2"></div>

      </div>
    </div>
    <div class="modal1" v-show="treeKey !== null">
      <div style="padding: 10px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >对象信息</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModal1"/>
      </div>
      <div>
        <a-form-item label="名称" name="名称" style="padding: 20px">
          <a-input type="text" />
        </a-form-item>
      </div>
      <div>
        <a-space style="float: right; padding-right: 20px">
          <img src="/imgs/btn2.png" alt=""/>
          <img src="/imgs/btn3.png" alt=""/>
        </a-space>
      </div>
    </div>
    <div class="modal2" v-show="showModal2">
      <div style="padding: 20px 40px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >对象信息</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModal2"/>
      </div>
      <div style="padding: 20px">
        <a-form
            :model="formState"
            ref="formRef"
            name="basic"
            autocomplete="off"
            :labelCol="{ style: 'width:100px' }"
        >
          <a-row class="row-box" :gutter="24">
            <a-col class="gutter-row" :span="12">
              <a-form-item label="名称" name="名称">
                <a-input type="text" v-model:value="formState.名称"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="颜色">
                <div class="colorInput" @click="changFillColor"></div>
                <Sketch
                    v-model="formState.GraphicColor"
                    :show="state.showFillSketch"
                    @changButton="changFillColorButton"
                ></Sketch>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="经度" name="经度">
                <a-input type="text" v-model:value="formState.经度"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="最近距离" name="最近距离">
                <a-input type="text" v-model:value="formState.最近距离"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="纬度" name="纬度">
                <a-input type="text" v-model:value="formState.纬度"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="最远距离" name="最远距离">
                <a-input type="text" v-model:value="formState.最远距离"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="高度" name="高度">
                <a-input v-model:value="formState.最远距离"/>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="12">
              <a-form-item label="跟随视野缩放" name="跟随视野缩放">
                <a-switch v-model:checked="checked"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div>
          <a-tabs v-model:activeKey="activeKey" @change="changeHandle">
            <a-tab-pane key="属性信息" tab="属性信息">
              <div style="width: 320px">
                <a-form-item label="内容类型" name="内容类型">
                  <a-input type="text" v-model:value="formState.名称"/>
                </a-form-item>
                <a-form-item label="编辑内容" name="编辑内容">
                  <a-input type="text" v-model:value="formState.名称"/>
                </a-form-item>
              </div>
            </a-tab-pane>
            <a-tab-pane key="方向信息" tab="方向信息">
              <div></div>
            </a-tab-pane>
            <a-tab-pane key="标注风格" tab="标注风格">
              <div></div>
            </a-tab-pane>
            <a-tab-pane key="标签风格" tab="标签风格">
              <div></div>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div>
          <a-space style="float: right; padding-right: 20px">
            <span style="color: #fff">隐藏</span>
            <a-switch v-model:checked="checked"/>
            <span style="color: #fff"
            >显示</span
            >
            <img src="/imgs/btn1.png" alt=""/>
            <img src="/imgs/btn2.png" alt=""/>
            <img src="/imgs/btn3.png" alt=""/>
          </a-space>
        </div>
      </div>
    </div>
    <div class="modal3" v-show="count=='大唐不夜城'">
      <div style="padding: 10px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >大唐不夜城</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModal3"/>
      </div>
      <div style="padding: 20px">
        <a-space>
          <div class="head-txt-box">
            <img src="/imgs/dtbyc1.png" alt=""/>
          </div>
          <div class="head-txt-box"><img src="/imgs/dtbyc2.png" alt=""/></div>
        </a-space>
      </div>
      <div style="padding: 20px 50px">
        <a-input type="text" placeholder="文本框"></a-input>
      </div>
    </div>
    <!-- <Modal ref="modalRef"></Modal> -->
    <div class="modal4" v-show="showModel4">
      <div style="padding: 10px">
        <span style="color: #fff; font-size: 20px; margin: 20px 0px 0px 20px"
        >操作工具</span
        >
        <img src="/imgs/关闭.png" alt="" @click="closeModel4"/>
      </div>
      <div>
        <a-form-item label="名称" name="名称" style="padding: 20px">
          <a-input type="text" />
        </a-form-item>
      </div>
      <div>
        <a-space style="float: right; padding-right: 20px">
          <img src="/imgs/btn2.png" alt=""/>
          <img src="/imgs/btn3.png" alt=""/>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  nextTick,
  watch,
} from "vue";
//1.先使用import导入你要在该组件中使用的子组件
import rigthDrawer from './RightDrawer.vue'
import {message} from 'ant-design-vue';

import {Sketch} from "@ans1998/vue3-color";
import {
  LeftCircleOutlined,
  RightCircleOutlined,
  SyncOutlined,
  CheckOutlined,
} from "@ant-design/icons-vue";
import {useStore} from 'vuex';


import {message} from "ant-design-vue";
import axios from "axios";
import VueCookies from "vue-cookies";
import Modal from "./Modal.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {shallowRef} from "@vue/reactivity";

const toolModal2 = ref(false);

export default defineComponent({
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,
    SyncOutlined,
    CheckOutlined,
    Modal,
    Sketch,
    rigthDrawer,
  },
  setup(props, {emit}) {
    const store = useStore();
    const modalRef = ref();

    const showModal2 = ref(false);

    const showModal3 = ref(false);
    const showModel4 = ref(false);
    const map = shallowRef(null);
    const formState = reactive({});
    const activeKey = ref("属性信息");
    const showfooter = ref([]);
    const count = computed(() => store.state.count)
    const treeKey = computed(() => store.state.treeKey)
    const footerArr = ref([
      {
        id: 1,
        flag: 0,
        child: [
          {name: '点', flag: 0}, {name: '线', flag: 0}, {name: '面', flag: 0}, {name: '围栏', flag: 0}, {
            name: '标注',
            flag: 0
          }
        ]
      },
      {
        id: 2,
        flag: 0,
        child: [
          {name: '模型', flag: 0}
        ]
      }, {
        id: 3,
        flag: 0,
        child: [
          {name: '坐标 ', flag: 0}, {name: '长度', flag: 0}, {name: '高度', flag: 0}, {name: '面积', flag: 0}
        ]
      }, {
        id: 4,
        flag: 0,
        child: [
          {name: '重点部位统计 ', flag: 0}, {name: '制高点统计', flag: 0}, {
            name: '管线统计',
            flag: 0
          }, {name: '高清出图', flag: 0}
        ]
      }
    ])
    const flag1 = ref(0);

    const closeModal1 = () => {
      store.commit('createModel',null)
    };

    const openModal2 = () => {
      showModal2.value = true;
      toolModal2.value = false;
    };
    const closeModal2 = () => {
      showModal2.value = false;
    };
    const openModal3 = () => {
      showModal3.value = true;
    };
    const closeModal3 = () => {
      store.commit('CHANGE_COUNT', "")

    };
    const bottomClick = (num) => {
      flag1.value = num;
      footerArr.value[num - 1].flag = 1
      showfooter.value = footerArr.value[num - 1].child
      // message.info(num);

    };
    const rightClick1 = (num) => {
      // rightBtnArr.value[num].flag = 1;
    };

    const rightClick2 = (num1, num2, name) => {
      if (name == "大唐不夜城") {
        showModal3.value = true;
      }
      // rightBtnArr.value[num1].child[num2].flag = 1;
    };

    const ininMap = () => {
      AMapLoader.load({
        key: "dc9795df105fd76f649c50bd4b54f22f", //设置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              mapStyle: "amap://styles/darkblue", //设置地图的显示样式
              pitch: 45,
              viewMode: "3D",
              terrain: true, // 开启地形图
              zoom: 18,
              zooms: [2, 22],
              center: [108.96, 34.22],
            });
            let positionArr = [
              // [113.357224,34.977186],
              // [114.555528,37.727903],
              // [112.106257,36.962733],
              // [109.830097,31.859027],
              // [116.449181,39.98614],
            ];
            for (let item of positionArr) {
              let marker = new AMap.Marker({
                position: [item[0], item[1]],
              });
              this.map.add(marker);
            }
          })
          .catch((e) => {
            console.log(e);
          });
    };
    const state = reactive({
      rowId: "",
      btnTxt: "添加",
      fillC: "填充颜色",
      size: "点大小",
      borderW: "边框宽度",
      showLineSketch: false,
      showFillSketch: false,
    });

    const secoundToolClick = (item, index) => {
      message.success(item.name + index);
      showModel4.value = true;
    }

    const closeModel4 = () =>{
      showModel4.value = false;
    }

    const hideSecoundTool = () =>{
      showfooter.value = [];
      message.success("footmain");
    }

    function changFillColor() {
      state.showFillSketch = true;
    }

    function changFillColorButton(item) {
      state.showFillSketch = false;
      if (item.isOk) {
        formState.GraphicColor = item.activeColor;
      }
    }

    onMounted(() => {
      ininMap();
    });

    return {
      changFillColor,
      changFillColorButton,
      state,
      modalRef,
      closeModal1,
      openModal2,
      showModal2,
      closeModal2,
      openModal3,
      showModal3,
      closeModal3,
      bottomClick,
      rightClick2,
      rightClick1,
      flag1,
      formState,
      activeKey,
      footerArr,
      showfooter,
      count,
      treeKey,
      secoundToolClick,
      hideSecoundTool,
      showModel4,
      closeModel4,
      toolModal2
    };
  },
  methods:{
    //鼠标进入的事件。
    onEnterTd() {
      toolModal2.value = true;
    },
    //鼠标离开的事件。
    onLeaveTd() {
      setTimeout(() => {
        //代码
        toolModal2.value = false;
      }, 800);
    }
  },

  mounted() {
  },

  watch:{

  }
});
</script>

<style lang="less" scoped>
.main-box {
  width: 100%;
  height: 100%;
  background-color: #ddd;
}

.top-box {
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 129px;
  top: 0px;
  z-index: 1;
  background-image: url("/imgs/title.png");
  text-align: center;
  background-size: 100% 100%;

  h4 {
    color: #fff;
    font-size: 36px;
    line-height: 100px;
  }
}

.footer-top {
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 81px;
  bottom: -80px;
  z-index: 1;

  .footer-top-main {
    width: 456px;
    height: 100%;
    margin: 0 auto;
    background-image: url("/imgs/工具二级展开背景切图.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .ft {
      background: url("/imgs/工具二级展开按钮未选中切图.png") no-repeat;
      width: 50px;
      height: 50px;
      cursor: pointer;
      margin: 0 15px;
    }

    .ft_h {
      background: url("/imgs/工具二级展开按钮选中切图.png") no-repeat;
      width: 50px;
      height: 50px;
      cursor: pointer;
      margin: 15px auto;
      margin-right: 30px;
      background-position-y: 50%;
    }

    .ft:hover {
      background: url("/imgs/工具二级展开按钮选中切图.png") no-repeat;
      cursor: pointer;
    }
  }
}

.footer-box {
  position: absolute;
  padding: 10px;
  width: 100%;
  height: 99px;
  bottom: 0px;
  z-index: 1;
  background-image: url("/imgs/工具栏背景切图.png");
  background-size: 100% 100%;

  .footer-main {
    width: 450px;
    height: 80px;

    position: absolute;
    left: 49%;
    top: 4%;
    margin-left: -200px; //要宽度的一半
    //margin-top:-200px;
    text-align: center;
  }

  .gj1 {
    background: url("/imgs/标绘未选中图标.png") no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 10px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj1_h {
    background: url("/imgs/标绘选中图标.png") no-repeat;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj1:hover {
    background: url("/imgs/标绘选中图标.png") no-repeat;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }

  .gj2 {
    background: url("/imgs/标注未选中图标.png") no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj2_h {
    background: url("/imgs/标注选中图标.png") no-repeat;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj2:hover {
    background: url("/imgs/标注选中图标.png") no-repeat;
    cursor: pointer;
    width: 40px;
    height: 40px;
  }

  .gj3 {
    background: url("/imgs/测量未选中图标.png") no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj3_h {
    background: url("/imgs/测量选中切图.png") no-repeat;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 15px auto;
    margin-right: 30px;
    background-position-y: 50%;
  }

  .gj3:hover {
    background: url("/imgs/测量选中切图.png") no-repeat;
    cursor: pointer;
    width: 40px;
    height: 40px;
  }

  .gj4 {
    background: url("/imgs/工具未选中图标.png") no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-position-y: 50%;
  }

  .gj4_h {
    background: url("/imgs/工具选中图标.png") no-repeat;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-position-y: 50%;
  }

  .gj4:hover {
    background: url("/imgs/工具选中图标.png") no-repeat;
    cursor: pointer;
    width: 40px;
    height: 40px;
  }

  .gj-btn {
    background: url("/imgs/注释背景切图.png");
    width: 91px;
    height: 55px;
    position: absolute;
    top: -14px;
    right: 0px;
    cursor: pointer;
  }
}

.right-box {
  position: absolute;

  height: calc(100% - 98px);
  top: 80px;
  z-index: 1;
  right: 0px;

  color: #fff;

  .rightContent {
    width: 342px;
    background: url("/imgs/right-bg.png");
    padding: 20px 10px 20px 30px;

    .right-input {
      width: 120px;
      background: none;
      border-radius: 30px;
      margin-left: 15px;
    }

    .right-btn1 {
      width: 149px;
      height: 69px;
      background: url("/imgs/一级按钮未选中切图.png") no-repeat 100%;
      text-align: center;
      line-height: 70px;

      cursor: pointer;
    }

    .right-btn1_h {
      width: 149px;
      height: 69px;
      background: url("/imgs/一级按钮选中切图.png") no-repeat 100%;
      text-align: center;
      line-height: 70px;

      cursor: pointer;
    }

    .right-btn1:hover {
      background: url("/imgs/一级按钮选中切图.png") no-repeat 100%;
    }

    .right-btn2 {
      width: 110px;
      height: 42px;
      background: url("/imgs/二级标题未选中切图.png");
      text-align: center;
      line-height: 36px;
      margin: 0px 30px 10px;

      cursor: pointer;
    }

    .right-btn2_h {
      width: 110px;
      height: 42px;
      background: url("/imgs/二级按钮选中切图.png");
      text-align: center;
      line-height: 36px;
      margin: 0px 30px 10px;
      cursor: pointer;
    }

    .right-btn2:hover {
      background: url("/imgs/二级按钮选中切图.png");
    }

    .right-btn3 {
      width: 101px;
      height: 32px;
      background: url("/imgs/三级标题未选中按钮切图.png");
      text-align: center;
      line-height: 32px;
      margin: 0px 60px 10px;

      cursor: pointer;
    }

    .right-btn3_h {
      width: 101px;
      height: 32px;
      background: url("/imgs/三级标题选中切图.png");
      text-align: center;
      line-height: 32px;
      margin: 0px 60px 10px;
      cursor: pointer;
    }

    .right-btn3:hover {
      background: url("/imgs/三级标题选中切图.png");
    }

    img {
      cursor: pointer;
    }
  }

}

.left-box {
  position: absolute;
  width: 300px;
  height: calc(100% - 98px);
  top: 64px;
  z-index: 1;
  left: 20px;
  background-color: rgba(255, 255, 255, 0.67);
  padding-top: 4px;

  z-index: 1;
}

.head-txt-box {
  padding: 10px 10px !important;
  width: 248px;
  height: 181px;
  box-shadow: 0 0 1px #20364d;
  background: linear-gradient(to left, #02edff, #02edff) left top no-repeat,
  linear-gradient(to bottom, #02edff, #02edff) left top no-repeat,
  linear-gradient(to left, #02edff, #02edff) right top no-repeat,
  linear-gradient(to bottom, #02edff, #02edff) right top no-repeat,
  linear-gradient(to left, #02edff, #02edff) left bottom no-repeat,
  linear-gradient(to bottom, #02edff, #02edff) left bottom no-repeat,
  linear-gradient(to left, #02edff, #02edff) right bottom no-repeat,
  linear-gradient(to left, #02edff, #02edff) right bottom no-repeat !important;
  background-size: 1px 15px, 15px 1px, 1px 15px, 15px 1px !important;
  background-color: rgba(32, 54, 77, 0.7) !important;
  z-index: 996 !important;
}

.modal1 {
  width: 557px;
  height: 365px;
  background: url("/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 50%;

  img {
    float: right;
  }
}

.modal3 {
  width: 557px;
  height: 365px;
  background: url("/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 50%;

  img {
    float: right;
  }
}

.modal2 {
  width: 780px;
  height: 548px;
  background: url("/imgs/对象信息背景切图.png");
  position: absolute;
  top: 100px;
  left: 0px;
  z-index: 1111111111111111;
  cursor: pointer;

  img {
    float: right;
  }
}

.modal4 {
  width: 557px;
  height: 365px;
  background: url("/imgs/大唐不夜城弹框背景切图.png");
  position: absolute;
  z-index: 1111111111111111;
  cursor: pointer;
  margin-top: 10%;
  margin-left: 50%;

  img {
    float: right;
  }
}

/deep/ .ant-input {
  background: none;
  border: 1px solid #2787c8;
  color: #fff;
}

/deep/ .ant-form-item-label > label {
  color: #fff;
}

.colorInput {
  height: 30px;
  width: 30px;
  border: 1px solid #2787c8;
  cursor: pointer;
}

.vc-sketch {
  position: absolute;
  z-index: 11111111111;
}

/deep/ .ant-tabs-tab-btn {
  color: #fff;
}
</style>

